import Link from "next/link";
import { usePathname, useRouter } from "next/navigation"
import { useIsThemeCompleted } from "../model/useIsThemeCompleted";



type ThemeProps = {
    title: string,
    award: number,
    id: number
}
export default function UiTheme(props: ThemeProps) {
    const pathname = usePathname()
    const isCompleted = useIsThemeCompleted(props.id)
    console.log(isCompleted.response)
    return (
        <Link href={`${pathname}/theme/${props.id}`}>
            <div className='flex-col mt-4 drop-shadow-lg rounded-[25px] w-96 h-36 bg-gray-200 hover:bg-gray-100 p-5 pl-7'>
                <h1 className='text-xl font-bold'>
                    {props.title}
                </h1>
                <p className='mt-8 text-lg'>
                    Награда за прохождение темы: {props.award}
                </p>
                {isCompleted.isSuccess && isCompleted.response==true &&
                <>
                Выполнено!
                </>}
            </div>
        </Link>
    )
}